<template>
	<div class="ffffff mainpadding radius" style="width: 75%;background-color: #fff;">
		<div class="flexleft">
			<div :class="tabActive==index?'active margin_right3 pointer':'noActive margin_right3 pointer'"
				v-for="(item,index) in tabList" :key="index" @click="tabActive=index">
				{{item.name}}
			</div>
		</div>
		<div class="margin_top titleBox mainpadding flexbetween radius" style="background-color: #3478F5;">
			<div class="flexleft">
				<img class="userImg margin_right1" :src="userinfo.avatar" alt="">
				<div>
					<div class="text_ft color_fff">{{userinfo.nickname}}</div>
					<div class="text_d color_f3 margin_top1" v-if="dataAll.expiretime_text">到期时间：{{dataAll.expiretime_text}}</div>
					<div class="text_d color_f3 margin_top1" v-else>暂未开通</div>
				</div>
			</div>
			<img src="../../static/image/mine/studyCard.png" alt="" v-if="tabActive==0">
			<img src="../../static/image/mine/examCard.png" alt="" v-if="tabActive==1">
		</div>
		<div class="text_ft color_three margin_top">学习卡尊享权益</div>
		<div class="text_d color_three margin_top2">开卡之后可以考试除了Vip和精选课程的测试！</div>
		<div class="text_ft color_three margin_top">选择套餐</div>
		<!-- 选择套餐 -->
		<div class="flexbetween margin_top2">
			<div class="flex1 margin_right3">
				<div class="flexleft">
					<div class="text_d color_zero white_nowrap">购买地区：</div>
					<el-cascader :options="options" :show-all-levels="false" v-model="cityInfo" @change="citychange"
						:props="{label:'text',value:'value'}" placeholder="请选择城市"></el-cascader>
				</div>
				<div class="flexleft margin_top2">
					<div class="text_d color_zero white_nowrap">购买年级：</div>
					<el-cascader :options="njoptions" :show-all-levels="false" v-model="nianji" @change="nianjichange"
						:props="{label:'period_text',value:'njid',children:'data'}" placeholder="请选择年级"></el-cascader>
				</div>
				<div class="flexleft margin_top2">
					<div class="text_d color_zero white_nowrap">购买学科：</div>
					<el-select v-model="xueke" placeholder="请选择学科" no-data-text="当前年级暂无学科,请更换年级" @change="init">
						<el-option v-for="item in xkoptions" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</div>
			</div>
			<div class="cardBox textcenter" v-show="dataAll.price">
				<div class="color_theme">
					<span class="text_dt">￥</span>
					<span class="text_ct">{{dataAll.price}}</span>
				</div>
				<div class="text_f color_theme margin_top">{{dataAll.name}}</div>
			</div>
		</div>
		<div class="margin_top flexleft" >
			<div class="text_d color_zero margin_right2">支付方式</div>
			<div class="pointer" :class="pay_type==1?'wayActive margin_right2':'way margin_right2'" @click="pay_type=1">
				<img class="weixinImg" src="../../static/image/home/weixinPay.png" alt="">
				<div class="text_d color_zero">微信支付</div>
			</div>
			<div class="pointer" :class="pay_type==3?'wayActive margin_right2':'way margin_right2'" @click="pay_type=3">
				<img class="balanceImg" src="../../static/image/home/balance.png" alt="">
				<div class="text_d color_zero">余额支付</div>
			</div>
		</div>
		<!-- 按钮 -->
		<div class="flexleft margin_top5">
			<div class="themeBtnBg margin_right2  pointer" @click="submit">立即购买</div>
			<div class="themeBtnBgSmall pointer" @click="goBuyRecord">购买记录</div>
		</div>
	</div>
</template>

<script>
	import citys from "@/static/city/city.js"
	import {
		getsubject
	} from "@/API/question"
	import {
		getGradeShow
	} from "@/API/home"
	import {
		card_show,
		buy_vip
	} from "@/API/studycard"
	import { getUserInfo } from "@/API/mine"
	export default {
		data() {
			return {
				tabActive: 0,
				tabList: [{
					name: "学习卡",
				}, {
					name: "考试卡",
				}],
				cityInfo: [], //城市信息
				options: [], //城市列表
				njoptions: [],
				nianji: [], //双层id["1,3"]
				xkoptions: [],
				xueke:"",//学科id
				dataAll:{},
				userinfo:{},
				pay_type:1,
			}
		},
		created() {
			let data = JSON.parse(JSON.stringify(citys.data))
			data.forEach(item => {
				item.children.forEach(ite => {
					delete ite.children
				})
			})
			this.options = data
			this.getnjlist()
			this.getuserinfo()
		},
		watch:{
			tabActive(){
				this.init()
			}
		},
		methods: {
			submit(){
				buy_vip({
					vip_card_id:this.dataAll.vip_card_id,
					city:this.cityInfo[1],
					province:this.cityInfo[0],
					card_type:this.tabActive+1,
					education_grade_id: this.nianji[1],
					education_subject_id: this.xueke,
					platform:"pc",
					pay_type:this.pay_type,
				}, false, false, true).then(res => {
					if (res.data.code == 1) {
						if(this.pay_type==3){
							this.$message.success(res.data.msg)
							this.init()
						}else{
							this.$message.success("微信支付，后期需对接，建议在上个界面获取openid然后传递过来")
						}
					}else{
						this.$message.error(res.data.msg)
					}
				}).catch(err => {
					this.$message.error(err.data.msg)
				})
			},
			async getuserinfo(){
				let res = await getUserInfo()
				this.userinfo = res.data.data
				console.log(this.userinfo,"99999");
			},
			nianjichange(e){
				this.getXkList()
			},
			citychange(){
				this.xueke = ""
			},
			async getnjlist() { //获取年级
				let res = await getGradeShow()
				res.data.data.forEach(item => {
					this.$set(item, "njid", item.period)
					item.data.forEach(ite => {
						this.$set(ite, "njid", ite.id)
						this.$set(ite, 'period_text', ite.name)
					})
				})
				this.njoptions = res.data.data
			},
			init() {
				if(!this.cityInfo.length)return
				if(!this.nianji.length)return
				if(!this.xueke)return
				card_show({
					city: this.cityInfo[1],
					card_type: this.tabActive +1,
					education_grade_id: this.nianji[1],
					education_subject_id: this.xueke,
				}).then(res => {
					if(res.data.code==1){
						this.dataAll = res.data.data
					}else{
						this.dataAll = {}
						this.$message.error(res.data.msg)
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			getXkList() { //获取学科数据
				getsubject({
					education_grade_id: this.nianji[1],
					period: this.nianji[0],
				}).then(res => {
					this.xkoptions = res.data.data
				})
			},
			goBuyRecord() { //购买记录
				this.$router.push({
					path: "/mine/buyRecord"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.way {
		display: flex;
		align-items: center;
		padding: 12px 15px;
		border-radius: 7px 7px 7px 7px;
		border: 1px solid #EAEAEA;
	}
	.wayActive {
		display: flex;
		align-items: center;
		padding: 12px 15px;
		border-radius: 7px 7px 7px 7px;
		border: 1px solid #3478F5;
	}
	.weixinImg {
		width: 14px;
		min-width: 14px;
		height: 12px;
		margin-right: 5px;
	}
	
	.balanceImg {
		width: 14px;
		min-width: 14px;
		height: 14px;
		margin-right: 5px;
	}
	.noActive {
		font-size: 15px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.active {
		font-size: 15px;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #3478F5;
		position: relative;
	}

	.active::after {
		content: '';
		width: 22px;
		height: 2px;
		background: #3478F5;
		border-radius: 6px 6px 6px 6px;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: -10px;
	}

	.titleBox {
		.userImg {
			width: 46px;
			min-width: 46px;
			height: 46px;
			border-radius: 50%;
		}
	}

	::v-deep .el-select {
		flex: 1;
	}

	.cardBox {
		padding: 40px;
		background: rgba(52, 120, 245, 0.1);
		border-radius: 4px 4px 4px 4px;
		border: 1px solid #3478F5;
	}

	.themeBtnBgSmall {
		padding: 10px 30px;
		background: rgba(52, 120, 245, 0.1);
		border-radius: 4px;
		border: 1px solid #3478F5;
		font-size: 12px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #3478F5;
	}

	.themeBtnBg {
		padding: 10px 30px;
		background-color: #3478F5;
		border-radius: 4px;
		border: 1px solid #3478F5;
		font-size: 12px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #ffffff;
	}
</style>